<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="食谱名称" prop="recipeName">
        <el-input
          v-model="queryParams.recipeName"
          placeholder="请输入食谱名称"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="餐饮套餐" prop="comboId">
        <el-select v-model="queryParams.comboId" placeholder="请输入餐饮套餐" :clearable="true">
          <el-option
            v-for="dict in comboList"
            :key="dict.id"
            :label="dict.comboName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="食谱类型" prop="recipeType">
        <el-select v-model="queryParams.recipeType" placeholder="请输入食谱类型" :clearable="true">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.RESTAURANT_RECIPE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['restaurant:recipe:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['restaurant:recipe:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
        <el-button v-hasPermi="['restaurant:combo:query']" @click="handleClickComboQuery">
          <Icon icon="ep:search" />
          餐饮套餐
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="RestaurantRecipe"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #imgUrl="{ row }">
        <span v-if="row.imgUrl == ''"></span>
        <el-image
          v-else
          preview-teleported
          loading="lazy"
          :src="row.imgUrl"
          :preview-src-list="[row.imgUrl]"
          fit="cover"
          class="w-[100px] h-[100px]"
        />
      </template>
      <template #recipeType="{ row }">
        {{ getDictObj(DICT_TYPE.RESTAURANT_RECIPE_TYPE, row.recipeType).label }}
      </template>
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['restaurant:recipe:update']"
        />
        <context-menu-item
          label="删除"
          @click="handleMenuDeleted(row)"
          v-hasPermi="['restaurant:recipe:deleted']"
        />
      </template>
    </Table>
  </ContentWrap>
  <RestaurantCombo ref="comboFormRef" @closed="handleComboClosed" />
  <RestaurantRecipeEdit ref="recipeEditRef" @success="getPage" />
</template>
<script setup name="RestaurantRecipe" lang="ts">
import * as RestaurantRecipeApi from '@/api/restaurant/recipe'
const message = useMessage() // 消息弹窗
import RestaurantCombo from './RestaurantCombo.vue'
import RestaurantRecipeEdit from './RestaurantRecipeEdit.vue'
import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
const comboFormRef = ref()
const recipeEditRef = ref()
const comboList = ref()
const queryFormRef = ref()
const queryParams = ref({
  recipeName: undefined,
  comboId: undefined,
  recipeType: undefined
})
const queryData = ref()
const columns = [
  {
    label: '食谱名称',
    prop: 'recipeName'
  },
  {
    label: '套餐',
    prop: 'combo.comboName'
  },
  {
    label: '食谱类型',
    prop: 'recipeType',
    slot: 'recipeType'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '图片',
    prop: 'imgUrl',
    slot: 'imgUrl'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(async () => {
  comboList.value = await RestaurantRecipeApi.listQueryCombo()
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  recipeEditRef.value.open('create', 0)
}

/** 餐饮套餐按钮操作 */
const handleClickComboQuery = () => {
  comboFormRef.value.open()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await RestaurantRecipeApi.query(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  recipeEditRef.value.open('update', row.id)
}

/** 处理右击事件 删除 */
const handleMenuDeleted = async (row) => {
  await message.confirm('确定要删除此食谱吗？')
  await RestaurantRecipeApi.deleted(row.id)
  getPage()
}

const handleComboClosed = async () => {
  comboList.value = await RestaurantRecipeApi.listQueryCombo()
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  recipeEditRef.value.open('update', row.id)
}
</script>
